<template>
  <div id="app1">
    <van-tabs @click="onClick">
      <van-tab title="全部"></van-tab>
      <van-tab title="未完成"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已完成"></van-tab>
      <van-tab title="已取消"></van-tab>
    </van-tabs>
    <div id="center1" v-for="item in orderList">
      <span id="span11">{{ new Date(item.queueTime).toISOString().split('T')[0] }}</span>
      <span id="span22">
        {{ item.status==5?"完成时间":""}}
        {{ item.status==6?"完成时间":""}}
        {{ item.status==4?"开始时间":""}}
        {{ item.status==3?"开始时间":""}}
        {{ item.status==1?"":""}}
        :
        {{ item.status==5?item.endTime:""}}
        {{ item.status==6?item.endTime:""}}
        {{ item.status==4?item.queueTime:""}}
        {{ item.status==3?item.queueTime:""}}
        {{ item.status==1?"":""}}
      </span>
      <span id="span33">
        {{ item.status==5?"待付款":"" }}
        {{ item.status==6?"已完成":"" }}
        {{ item.status==4?"未完成":"" }}
        {{ item.status==3?"未完成":"" }}
        {{ item.status==1?"已取消":"" }}>
      </span>
      <span id="span44">{{item.startingPoint}}--</span>
      <span id="span55">{{ item.terminal }}</span>
      <div id="button1">
        <van-button type="primary" size="mini" @click="toxiang(item.orderId,item.status)">消息</van-button>
        <van-button type="primary" size="mini" @click="feedback(item.orderId)">反馈</van-button>
      </div>
    </div>
    <div class="ss">
      <van-tabbar route>
        <van-tabbar-item icon="home-o"   to="/shouye">首页</van-tabbar-item>
        <van-tabbar-item icon="reorder-o" to="/dcOrders">订单</van-tabbar-item>
        <van-tabbar-item icon="wallet-o" @click="toqianbao">钱包</van-tabbar-item>
        <van-tabbar-item icon="chat-o" @click="toxiaoxi">消息</van-tabbar-item>
        <van-tabbar-item icon="my-o" @click="toPersonalCenter" to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>

import axios from 'axios';

export default {
  name: 'dcOrders',
  data() {
    return {
      active: 0,
      activeName: 'a',
      orderList: [],
      ostatus:'',
      clist:[],
      id:''
    }
  },
  created() {
    this.findList()
  },
  methods: {
    toxiang(orderId,status){
      if (status==='1'||status==='2'){
        this.$router.push({name:"finishOrders",params:{orderId:orderId}})
      }else if (status==='3'){
        this.$router.push({name:"undoneorder",params:{orderId:orderId}})
      }
    },
    feedback(orderId){
      this.$router.push({name:"feedback",params:{orderId:orderId}});
    },
    toqianbao(){
      this.$router.push('/card');
    },
    toxiaoxi(){
      this.$router.push('/newIndex');
    },
    onClick(index){
      if (index===0){
        axios.get(`personal/queue/findPhone?did=${this.id}`).then(res => {
          this.orderList = res.data
        })
      }else if (index===1) {
        axios.get(`personal/queue/find?status=3&&did=${this.id}`).then(res => {
          this.orderList = res.data
        })
      } else if (index === 2) {
        axios.get(`personal/queue/find?status=1&&did=${this.id}`).then(res => {
          this.orderList = res.data
        })
      } else if (index === 3) {
        axios.get(`personal/queue/find?status=2&&did=${this.id}`).then(res => {
          this.orderList = res.data
        })
      } else if (index === 4) {
        axios.get(`personal/queue/find?status=4&&did=${this.id}`).then(res => {
          this.orderList = res.data
        })
      }
    },
    toshouye() {
      this.$router.push("/shouye")
    },
    toPersonalCenter() {
      this.$router.push('/PersonalCenter')
    },
    findList() {
      const tel=JSON.parse(localStorage.getItem('login'));
      axios.get(`order/driver/findOne?tel=${tel}`).then(res => {
        this.clist = res.data
        this.id=this.clist.id
        console.log(this.id)
        console.log('11111111111111111')
        axios.get(`personal/queue/findPhone?did=${this.id}`).then(res => {
          this.orderList = res.data
        })
      })

    }
  }
}
</script>

<style scoped>
#app1 {
  margin-top: 30px;
}

#span11 {
  display: inline-block;
  width: 100px;
  margin-left: 10px;
}

#span22 {
  display: inline-block;
  width: 250px;
  margin-left: 8px;
}

#span33 {
  display: inline-block;
  width: 100px;
  text-align: right;
  color: orange;
}

#span44 {
  display: inline-block;
  width: 100%;
  margin-top: 3px;
  margin-left: 10px;
}

#span55 {
  display: inline-block;
  width: 100%;
  margin-left: 10px;
  margin-top: 10px;
}

#center1 {
  padding-top: 10px;
  width: 100%;
  height: 120px;
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(993, 892, 200, 0.9);
  #button1 {
    text-align: right;
    margin-right: 10px;
    margin-top: 8px;
  }
}


.ss {
}
</style>
